<script setup>
import {useRoute} from "vue-router";
import {onMounted, ref} from "vue";
import myAxios from "../plugins/myAxios.ts";
import {showSuccessToast, showFailToast} from 'vant';
import qs from 'qs'
import UserCardList from "../components/UserCardList.vue";

const route = useRoute();
const {tags} = route.query;
const userList = ref([])
const loading = ref(true);




onMounted( async () => {
  // 为给定ID的user创建请求
  const userListData = await myAxios.get('/user/search/tags', {
    params: {
      tagNameList: tags
    },
    paramsSerializer: params => {
      return qs.stringify(params, {indices: false})
    }
  })
      .then(function (response) {
        console.log('/user/search/tags succeed', response);
        // showSuccessToast("搜索成功");
        return response?.data;
      })
      .catch(function (error) {
        console.log('/user/search/tags failed', error);
        showFailToast("搜索失败");
      });
  console.log(userListData);
  if (userListData) {
    // 这里循环遍历，将tags字段转为json对象,防止前端展示标签的时候每个字符都分割
    userListData.forEach(user =>{
      if (user.tags) {
        // console.log("tags:", user.tags);
        user.tags = JSON.parse(user.tags);
        // console.log("tags:", user.tags);

      }
    })
    userList.value = userListData;
  }
  loading.value = false;

})



// const mockUser = ref({
//   id: 931,
//   username: '沙鱼',
//   userAccount: 'shayu',
//   profile: '一条咸鱼',
//   gender: 0,
//   phone: '123456789101',
//   email: 'shayu-yusha@qq.com',
//   planetCode: '931',
//   avatarUrl: 'https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg',
//   tags: ['java', 'emo', '打工中', 'emo', '打工中'],
//   createTime: new Date(),
// })




</script>

<template>
<!--  &lt;!&ndash;  标签搜索获取的结果商品卡片展示 &ndash;&gt;-->
<!--  <van-card-->
<!--      v-for="user in userList"-->
<!--      :desc="user.profile"-->
<!--      :title="`${user.username} (${user.planetCode})`"-->
<!--      :thumb="user.avatarUrl"-->
<!--  >-->
<!--    <template #tags>-->
<!--      &lt;!&ndash;      &lt;!&ndash;      这个是获取模拟数据的标签 &ndash;&gt;&ndash;&gt;-->
<!--      &lt;!&ndash;      <van-tag plain type="danger" v-for="tag in user.tags" style="margin-right: 8px; margin-top: 8px">&ndash;&gt;-->
<!--      &lt;!&ndash;      获取路由传递过来的标签 &ndash;&gt;-->
<!--      <van-tag plain type="danger" v-for="tag in user.tags" style="margin-right: 8px; margin-top: 8px">-->
<!--        {{ tag }}-->
<!--      </van-tag>-->
<!--    </template>-->
<!--    <template #footer>-->
<!--      <van-button size="mini">联系我</van-button>-->
<!--    </template>-->
<!--  </van-card>-->

  <!-- 展示组件抽离出单独的 -->
  <!--    user-list和userList都可以，都识别-->
  <user-card-list :user-list="userList" :loading="loading"></user-card-list>
  <!--  增添搜素标签结果为空的页面展示 -->
  <van-empty v-if="!loading && (!userList || userList.length < 1)" description="搜索结果为空"/>
</template>

<style scoped>

</style>